<template>
  <div>
    <div class="playedu-main-top">
      <div class="main-title">当前版本信息</div>
      <div class="float-left mt-24">
        <div class="persion">PlayEdu开源版 v2.0</div>
      </div>
      <div class="float-left mt-16">
        <div class="content">
          1.版权归属：PlayEdu开源版版权归杭州白书科技有限公司所有，保留全部使用权。
        </div>
        <div class="content">
          2.代码修改：允许在遵守开源协议的前提下修改代码，但需在修改处添加明确备注，详细说明修改内容。
        </div>
        <div class="content">
          3.版权保护：任何场景下均需保留
          PlayEdu开源版页面及代码中的原有版权信息（如 "Designed By PlayEdu"
          标识、官网链接、开源说明等），严禁删除、修改或篡改，违者需承担法律责任及赔偿。
        </div>
      </div>
      <div class="float-left mt-24">
        <a-button type="primary" @click="openWebsite">
          采购企业版本
        </a-button>
      </div>
    </div>
    
    <div class="playedu-main-top mt-24" style="position: relative">
      <div class="main-title">版本功能对比</div>
      
      <!-- 系统支持 -->
      <div class="float-left mt-24">
        <div class="contrast-box1">
          <div class="name">功能特性</div>
          <div class="ex">开源版</div>
          <div class="ex2">企业版</div>
        </div>
      </div>
      
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">系统支持</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>功能支持</span>
          </div>
          <div class="ex">基础功能</div>
          <div class="ex2">全部功能</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>技术支持</span>
          </div>
          <div class="ex">无</div>
          <a-tooltip class="ex2" title="专属售后群以及远程排障服务">
            <img :src="fangIcon" class="icon" />
            7*10h专业技术服务
          </a-tooltip>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>安全认证</span>
          </div>
          <div class="ex">无</div>
          <div class="ex2">CMA国家资质安全认证</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>部署服务</span>
          </div>
          <div class="ex">无</div>
          <div class="ex2">内外网单机及集群部署</div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>性能负载</span>
          </div>
          <div class="ex">低</div>
          <div class="ex2">企业级全链路高性能场景</div>
        </div>
      </div>
      
      <!-- 资源类型 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">资源类型</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>视频库</span>
          </div>
          <div class="ex">MP4(H264)</div>
          <div class="ex2">MP4|MOV|AVI|WMV|FLV</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>图片库</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>附件库</span>
            <span class="sp">（仅支持上传下载）</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>文档库</span>
            <span class="sp">（支持Word、PPT、PDF在线预览）</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>音频库</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>证书库</span>
            <span class="sp">（支持自定义证书设计）</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>讲师资料</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 考试中心 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">考试中心</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>试题库</span>
            <span class="sp">（支持六大题型，支持批量导入）</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>试卷库</span>
            <span class="sp">（支持手动组卷，随机组卷）</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 培训中心 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">培训中心</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>线上课</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>线下课</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>学习任务</span>
            <span class="sp">
              （支持指派部门以及独立学员、支持多阶段学习、支持闯关模式、支持关联证书奖励）
            </span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>考试任务</span>
            <span class="sp">
              （支持指派部门以及独立学员、支持试题/选项乱序、支持补考、支持关联证书奖励）
            </span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>指派方式</span>
          </div>
          <div class="ex">部门</div>
          <div class="ex2">部门|学员|用户组</div>
        </div>
      </div>
      
      <!-- 积分激励 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">积分激励</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>积分规则</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>积分调整</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>积分排行</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 数据统计 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">数据统计</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>数据概览</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>学习排行</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>资源统计</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>学员信息导出</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>课程学习导出</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>学员学习导出</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>部门学习导出</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>学习任务统计</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>考试任务统计</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>考生答卷导出</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 防作弊 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">防作弊</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>防拖拽</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>防挂机</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>防切屏</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 系统配置 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">系统配置</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>网站设置</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>播放设置</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>学员设置</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 单点登录 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">单点登录</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>LDAP</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>企业微信</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>钉钉</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>飞书</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>云之家（金蝶）</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>CAS</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>泛微</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">免费支持</div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>用友</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">免费支持</div>
        </div>
      </div>
      
      <!-- 存储方案 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">存储方案</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>MinIO(私有化)</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>阿里云oss</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>腾讯云cos</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 安全保护 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">安全保护</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>视频跑马灯</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>HLS视频加密</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>视频防嗅探下载</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>文档水印</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>考试水印</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>试题防复制</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 多终端 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">多终端</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>PC独立网站</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>移动端H5</span>
          </div>
          <div class="ex">
            <img :src="ex1Icon" class="pic" />
          </div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
      
      <!-- 版权信息 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">版权信息</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>代码协议文件</span>
          </div>
          <div class="ex">不可移除</div>
          <div class="ex2">企业授权</div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>页脚版权链接</span>
          </div>
          <div class="ex">不可移除</div>
          <div class="ex2">企业授权</div>
        </div>
      </div>
      
      <!-- 售后服务 -->
      <div class="float-left mt-30">
        <div class="contrast-box2">
          <div class="name">售后服务</div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>安装部署</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>使用手册</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3">
          <div class="name">
            <strong></strong>
            <span>系统升级</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
        
        <div class="contrast-box3" style="border-radius: 0px 0px 16px 16px">
          <div class="name">
            <strong></strong>
            <span>专属服务群</span>
          </div>
          <div class="ex"></div>
          <div class="ex2">
            <img :src="ex2Icon" class="pic" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Button, Tooltip } from 'ant-design-vue';
import fangIcon from "@/assets/images/commen/fanghu.png";
import ex1Icon from "@/assets/images/commen/icon5.png";
import ex2Icon from "@/assets/images/commen/icon6.png";

const AButton = Button;
const ATooltip = Tooltip;

// 打开官网
const openWebsite = () => {
  window.open("https://www.playeduos.com/");
};
</script>

<style scoped>
.main-title {
  width: 100%;
  height: auto;
  float: left;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.persion {
  width: 158px;
  height: 32px;
  background: rgba(255, 77, 79, 0.1);
  border-radius: 6px 6px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #ff4d4f;
}

.content {
  width: 100%;
  height: auto;
  float: left;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 24px;
  text-align: left;
}

.contrast-box1 {
  width: 100%;
  height: 85px;
  float: left;
  background: #fafafa;
  border-radius: 16px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  padding: 15px 100px 15px 100px;
  display: flex;
  align-items: center;
  .name {
    flex: 1;
    height: 25px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    line-height: 25px;
  }
  .ex {
    width: 114px;
    height: 55px;
    background: #ff4d4f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 25px;
    margin-right: 307px;
  }
  .ex2 {
    width: 114px;
    height: 55px;
    background: #f1aa2e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 25px;
    margin-right: 47px;
  }
}

.contrast-box2 {
  width: 100%;
  float: left;
  height: 65px;
  background: rgba(#f1aa2e, 0.1);
  border-radius: 16px 16px 0px 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  padding: 20px 100px 20px 100px;
  display: flex;
  align-items: center;
  .name {
    flex: 1;
    height: 25px;
    font-weight: 600;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 25px;
  }
}

.contrast-box3 {
  width: 100%;
  height: 85px;
  float: left;
  height: 76px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  padding: 30px 100px 30px 100px;
  display: flex;
  align-items: center;
  border-top: none;
  position: relative;
  .name {
    flex: 1;
    height: 16px;
    display: flex;
    align-items: center;
    strong {
      width: 8px;
      height: 8px;
      background: #f1aa2e;
      border-radius: 50%;
      margin-right: 10px;
    }
    span {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
    }
    .sp {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 16px;
    }
  }
  .ex {
    width: 209px;
    height: auto;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #ff4d4f;
    line-height: 16px;
    margin-right: 209px;
    display: flex;
    align-items: center;
    justify-content: center;
    .pic {
      width: 18px;
      height: 18px;
    }
  }
  .ex2 {
    width: 209px;
    height: auto;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #ff9900;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    .pic {
      width: 18px;
      height: 18px;
    }
  }
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

</style>